import React from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import { Table, Button, Divider, Popconfirm } from 'antd';
import Editor from './edit';
import common from '../common.less';
import StatusSwitch from '../../../components/statusSwitch';
import { changeStatus } from '../../../utils';

function EmployeeList({ employee, baseData, dispatch }) {
    const { data, editorData } = employee;
    // const toggleStatus = (r, v) => {
    //     console.log(r);
    //     const { empId } = r;
    //     dispatch({
    //         type: 'employee/changeStatus',
    //         payload: {
    //             status: v ? 1 : 0,
    //             empId,
    //         },
    //     });
    // };
    const onRemoveData = ({...query}) => {
        const { empId } = query;
        dispatch({
            type: 'employee/removeData',
            selectId: empId,
        });
    };
    const columns = [
        {
            title: '姓名',
            key: 'name',
            dataIndex: 'employee',
        },
        {
            title: '用户名',
            key: 'userName',
            dataIndex: 'userName',
        },
        {
            title: '手机号',
            key: 'mobile',
            dataIndex: 'mobile',
        },
        {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
            render: (t, data) => (
                <StatusSwitch
                    onChange={changeStatus.bind(null, {data, ns: 'employee', put: dispatch})}
                    status={t}
                />
            ),
        },
        {
            title: '操作',
            render: (t, r) => {
                return (
                    <div>
                        <a onClick={onEditorData.bind(null, r)}>编辑</a>
                        <Divider type="vertical" />
                        <Popconfirm
                            title="您要删除码?"
                            okText="删除"
                            cancelText="取消"
                            onConfirm={onRemoveData.bind(null, r)}
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </div>
                );
            },
        },
    ];
    const onEditorData = (data) => {
        console.log('dadad');
        // 将获取到的角色 id 的值的类型由 number 转换为 string
        if (!_.isEmpty(data)) {
            if (_.isNumber(data.empId)) {
                data.empId = data.empId.toString();
            } else if (!data.empId && data.empId !== 0) {
                data.empId = undefined;
            }
        }
        dispatch({
            type: 'employee/editorVisible',
            payload: { editorData: data },
        });
    };
    const editProps = {
        name: '人员数据',
        ns: 'employee',
        isNew: _.isEmpty(editorData),
        dispatch,
    };
    return (
        <div className={common.normalWrap}>
            <div className={common.buttonWrap}>
                <Button type="primary" onClick={onEditorData.bind(null, {})}>添加员工</Button>
            </div>
            <div className={common.table}>
                <Table
                    rowKey="empId"
                    columns={columns}
                    dataSource={data}
                />
                <Editor {...{ baseData, ...employee, ...editProps }} />
            </div>
        </div>
    );
}

function mapStateToProps({ employee, app: { baseData } }) {
    return { employee, baseData };
}

export default connect(mapStateToProps)(EmployeeList);
